<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>请升级您的浏览器 - 极客公园</title>
  <%= javascript_include_tag('upbrowser.js') %>
</head>
<body>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #f8f9f1;
      text-align: center;
    }
    a {
      color: #000;
      text-decoration: none;
    }
    img {
      border: none;
    }
    .content {
      width: 960px;
      margin-left: auto;
      margin-right: auto;
    }
    .caption {
      letter-spacing: 7px;
      font-size: 40px;
      font-weight: bold;
      margin: 50px 0 0 0;
    }
    .description {
      font-weight: normal;
      font-size: 16px;
      color: #555;
      margin-top: 10px;
    }
    .browser-list a {
      display: inline-block;
      width: 150px;
      margin-left: 60px;
      margin-right: 60px;
      border: none;
    }
    .name {
      display: inline-block;
      padding: 2px 5px;
    }
    .browser-list a:hover .name{
      background: #555;
      color: #fff;
    }
    .force {
      margin: 20px;
    }
    .force a {
      display: inline-block;
      padding: 2px 5px;
      color: #fff;
      background: #aaa;
    }

  </style>
  <div class="content">
    <h1 class="caption">请升级您的浏览器</h1>
    <h3 class="description">您的浏览器版本过低，升级浏览器可带来更好的体验</h3>
    <div class="browser-list">
      <a href="//www.google.cn/intl/zh-CN/chrome/" target="_blank" class="chrome">
        <%= image_tag('killie/chrome.jpg', alt: '下载谷歌浏览器', title: '下载谷歌浏览器')  %>
        <span class="name">Chrome</span>
      </a>
      <a href="//www.firefox.com.cn/download/" target="_blank" class="firefox">
        <%= image_tag('killie/firefox.jpg', alt: '下载火狐浏览器', title: '下载火狐浏览器')  %>
        <span class="name">Frefox</span>
      </a>
      <a href="//www.apple.com/cn/safari/" target="_blank" class="safari">
        <%= image_tag('killie/safari.jpg', alt: '下载Safari浏览器', title: '下载Safari浏览器')  %>
        <span class="name">Safari</span>
      </a>
    </div>
    <div class="force">
      <a href="javascript:;" id="goback" style="display: none;">执意浏览</a>
    </div>
    <a href="//www.geekpark.net">
      <%= image_tag('killie/killie.jpg')  %>
    </a>
  </div>
  <script>
    (function(){
      var lastPage = document.referrer;

      // 如果直接访问这个网页则跳转到主页（因为没有referrer）
      if(lastPage == '') {
        APP.cookie.setItem('upbrowser', 'false');
        window.location.href = '<%= root_path %>';
      }

      window.onload = function(){
        var goBack = document.getElementById('goback');
        if(lastPage.length !== 0) {
          goBack.setAttribute('style', 'display: inline;');
        }
      }

      var gobackBtn = document.getElementById('goback');

      // 执意浏览
      function goback() {
        console.log('goback');
        APP.cookie.setItem('upbrowser', 'false');
        window.location.href = lastPage;
      }

      if(gobackBtn) {
        gobackBtn.attachEvent("onclick", goback);
      }
    })();
  </script>
</body>
</html>
